<template>
  <div>
    <el-menu background-color="#545c64"
             text-color="#fff"
             active-text-color="#ffd04b"
             :default-active="activeIndex"
             router
             mode="horizontal">
      <NavMenu :navMenus="menuData"></NavMenu>
    </el-menu>
    <router-view style="margin-left:250px"></router-view>
  </div>
</template>

<script>
import NavMenu from './NavMenu'
export default {
  components: {
    NavMenu: NavMenu
  },
  data () {
    return {
      activeIndex: 'home',
      menuData: []
    }
  },
  // 进入页面自动提交
  mounted () {
    // 获取菜单树
    this.$post('/user/getMenuList').then(res => {
      if (res.code === 200) {
        // this.menuData = res.data
        localStorage.menuData = JSON.stringify(this.menuData)
        this.menuData = localStorage.menuData
        // console.log(window.location.href)
        // console.log(this.menuData)
        // console.log("获取菜单")
      }
      if (res.code === 500) {
        this.$message(res.data)
      }
    })

    let start = window.location.href.lastIndexOf('/')
    let path = window.location.href.slice(start + 1)
    this.activeIndex = path
    // console.log(this.activeIndex)
  }
}
</script>

<style>
/* 水平样式 */
.el-menu--horizontal > div > .el-submenu {
  float: left;
}
/* 一级菜单的样式 */
.el-menu--horizontal > div > .el-menu-item {
  float: left;
  height: 60px;
  line-height: 60px;
  margin: 0;
  border-bottom: 2px solid transparent;
  color: #909399;
}
/* 解决下图1 下拉三角图标 */
.el-menu--horizontal > div > .el-submenu .el-submenu__icon-arrow {
  position: static;
  vertical-align: middle;
  margin-left: 8px;
  margin-top: -3px;
}
/* 解决下图2 无下拉菜单时 不对齐问题 */
.el-menu--horizontal > div > .el-submenu .el-submenu__title {
  height: 60px;
  line-height: 60px;
  border-bottom: 2px solid transparent;
  color: #909399;
}
</style>
